<template>
    <div class="page-container">
        <div class="text-center">
            <img src="~@/assets/images/error/403.svg" alt="" />
        </div>
        <div class="text-center">
            <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
            <n-button type="info" @click="goHome">回到首页</n-button>
        </div>
    </div>
</template>

<script>
    name: '403'
</script>

<script setup>
    import { router } from '../../../router'

    const goHome = () => {
        router.push('/')
    }
</script>

<style lang="less" scoped="scoped">
    .page-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        border-radius: 4px;
        padding: 50px 0;
        height: 100vh;

        .text-center {
            text-align: center;

            h1 {
                color: #666;
                padding: 20px 0;
            }
        }

        img {
            width: 350px;
            margin: 0 auto;
        }
    }
</style>
